<template>
  <div>
    <!-- 顶部导航栏 --> 
    <van-nav-bar  title="志愿者招募" left-arrow @click-left="$router.go(-1)"/>
      <!-- 志愿者活动 -->
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">  <!-- @load="onLoad" -->
          <van-cell class="news-content" v-for="(item,index) in actList" @click="actiList(item.id)" :key="index" >
           <ul>
              <li  class="acti-list">
                <div class="acti-img">
                  <img :src="item.activeImg" alt="">
                </div>
                <div class="acti-box">
                  <p class="acti-title">{{item.activeTitle}}</p>
                  <div class="acti-content">
                    <p >活动时间：<label >{{item.startTime}}</label></p>
                    <p >活动地址：<label >{{item.activeAddress}}</label></p>
                  </div>
                </div>
                <div :class="{'prompt':item.activeStatus == 1,'over':item.activeStatus == 3,'hot':item.activeStatus == 2}">
                    <label v-if="item.activeStatus == 1">进行中</label>  
                    <label v-if="item.activeStatus == 3">已结束</label>  
                    <label v-if="item.activeStatus == 2">火热报名</label>  
                </div>
              </li>  
            </ul>
          </van-cell>
        </van-list>
        <!-- 按钮 -->
      <div class="activ-btn">
        <button class="btn" v-if="userType == 1 && actList.length>0" @click="becomeRec">成为志愿者</button>
        <button class="btn huise" v-else-if="userType == 2 && actList.length>0">已是志愿者</button>
      </div>
  </div>
</template>
<script>
import apiHttp from '../../../../api/index'
import { Toast } from 'vant'
export default {
  data(){
    return{
      id:this.$route.query.id ? this.$route.query.id : '',  // 判断页面是否存在id
      loading: false,
      finished: false,
      actList:[],
      userType:1,
      page:0,
      total:-1,
      userId:sessionStorage.getItem('userId')
    }
  },
  methods:{
      actiList(id){
        this.$router.push( {path: "../../../details/recruitList",query: { id: id}})
      },
      // 成为志愿者
      becomeRec(){
        this.$router.push( {path: "./becomeRec",query: { id:this.id}})
      },
      // 获取社区列表接口
      getActivityList(){
        let params ={
          page : this.page,
          pageSize :10,
          type:2,
          commId:this.id,
          userId:sessionStorage.getItem('userId'),
        }
        apiHttp.activityIndex.getActivityList(params,resp=>{
          if(resp.resultCode == '000000'){
            for(let i = 0; i < resp.data.actList.length; i++){
              this.actList.push(resp.data.actList[i])
            }
            this.userType = resp.data.userType
            this.total = resp.data.total
            this.loading = false;
          }else{
            Toast(resp.resultMsg)
          }
        })
      },
      onLoad(){
        if(this.actList.length == this.total){
            this.finished  = true
            this.loading = false;
        }else{
            this.page++
            this.getActivityList();
        }
      }
    },
  }
</script>
<style scoped>
@import '../../../../assets/css/index.css';
  .van-cell{
    width: 90%;
  }
  .news-content{
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .acti-img{
    /* height: 7rem; */
    border-radius:10px;
    width: 100%;
  }
  .acti-img img{
    border-radius:4px;
  }
  .acti-box{
    padding: 0.5rem 0.5rem 0 0.5rem;
  }
  .acti-title{
    font-size: 0.65rem;
    font-weight: 600;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .acti-content p label{
    color: #999999;
  }
  .acti-list{
    position: relative;
  }
  /* 进行中 */
  .prompt{
    position: absolute;
    top: 0;
    right: -3rem;
    width: 0;
    height: 0;
    border-width:3rem;
    border-style: solid;
    border-color: #27C86B transparent transparent transparent;
  }
  /* 已结束 */
  .over{
    position: absolute;
    top: 0;
    right: -3rem;
    width: 0;
    height: 0;
    border-width:3rem;
    border-style: solid;
    border-color: #FF9C00 transparent transparent transparent;
  }
  /* 火热报名 */
   .hot{
    position: absolute;
    top: 0;
    right: -3rem;
    
    width: 0;
    height: 0;
    border-width:3rem;
    border-style: solid;
    border-color: #D33043 transparent transparent transparent;
  }
  .prompt label,.over label{
    position: absolute;
    top: -2.4rem;
    left: -2rem;
    font-size: 0.55rem;
    width: 2rem;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    color: #ffffff;
  }
  .hot label{
    position: absolute;
    font-size: 0.55rem;
    top: -2.2rem;
    left: -2.2rem;
    width: 3rem;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    color: #ffffff;
  }
  /* 按钮 */
  .activ-btn{
    position: fixed;
    bottom: 0rem;
    width: 100%;
    text-align: center;
    background-color: #fff;
    padding: 2%;
  }
  .btn{
   
    border: none;
    width: 90%;
    line-height: 1.8rem;
    border-radius:6px;
    background-color: #D33043;
    color: #FFFFFF;
    font-size: 0.8rem;
  }
  .van-list{
    margin-bottom: 2rem;
  }
  .huise{
    background-color: #ccc;
  }
</style>